<template>
	<view :style="objColor">
		<!-- homeSub/pages/power/power.wxml v-if="showCustom"-->
		<block v-if="backType==0">
			<!-- <capsule v-if="!showCustom" title="充电中" image="https://oos-cn.ctyunapi.cn/front-end/static/static/back1.png" txtColor="#FFFFFF" :show_bol="false"></capsule> -->
			<navLod txtColor="#FFFFFF" bgColor="#16181A" image="https://oos-cn.ctyunapi.cn/front-end/static/static/back1.png"
				title="充电中" :show_bol="false"></navLod>
		</block>
		<block v-if="backType==2">
			<homeNav title="充电中" image="https://oos-cn.ctyunapi.cn/front-end/static/static/back1.png" txtColor="#FFFFFF"
				:show_bol="false" bgColor="#16181A"></homeNav>
		</block>
		<view class="powerCon" :style="'padding-top:' + (widnowH <= 568 ? bar_Height + 40 : bar_Height + 45) + 'px;'">
			<view class="infoTopCon">
				<view v-if="sellerNo == 'tj'" style="margin-bottom: 10px;">{{ currentTimes }}</view>
				<view class="infoSite">
					{{ chargeInfo.stationName?chargeInfo.stationName:'--' }}
					<image class="infoImg" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/why.png"
						@tap="clickParkingRate2()"></image>
				</view>
				<view class="infoGun" v-if="chargeInfo.terminalType !=2">
					{{chargeInfo.gunName?chargeInfo.gunName:'--'}}
				</view>
			</view>

			<!-- 动图 -->
			<view class="loading-warp" style="width: 100%; height: 400rpx;">

				<!-- <canvas>{{chargeInfo.soc?chargeInfo.soc:0}}%</canvas> -->
				<l-svga ref="myCanvas" class="SVGACon"></l-svga>
				<!-- <cover-view class="sosCon">{{chargeInfo.soc?chargeInfo.soc:0}}%</cover-view> -->
				<view v-if="chargeInfo.terminalType !=2" class="sosCon">{{chargeInfo.soc?chargeInfo.soc:0}}<text class="sosScale">%</text></view>
				<!-- <image class="img" src="../../images/car_bg.png"></image> -->
			</view>

			<!-- 超充右svga -->
			<!-- <l-svga class="svgaRightCon" ref="svgaRightCon"></l-svga> -->
			<!-- 超充左svga -->
			<!-- <l-svga class="svgaLeftCon" ref="svgaLeftCon"></l-svga> -->
			<!-- <image class="img" src="../../images/car_bg.png"></image> -->
			<view class="infoPlate" v-if="chargeInfo.terminalType !=2">
				{{ chargeInfo.plateno ? chargeInfo.plateno : '--' }}
			</view>
			<view class="infoEstimate" v-if="chargeInfo.terminalType !=2">
				<text
					class="infoEstimateText">预计充电剩余时间</text>{{ !chargeInfo.remainingtime||chargeInfo.remainingtime==0?'计算中':chargeInfo.remainingtime>60?'>60min':chargeInfo.remainingtime+'min' }}
			</view>



			<!-- 831价格展示 -->
			<view class="price_view_box" v-if="chargeInfo.terminalType !=2">
				<view class="img_view">
					<image src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/tip2.png"
						@tap="pricePopupVisible(true)"></image>
				</view>
				<view class="price_view">
					<!-- 先判断 是否有专享价 -->
					<view class="total_view yyy" v-if="currentPriceNow.exclusiveDiscount">
						<!-- 只有专享价 -->
						<view class="zxj_view zxj">
							<!-- <view class="current_view">
								<text class="v_text_current">
									当前电价：¥<text class="current_t">{{ currentPriceNow.sweepPriceStr }}</text>
								</text>
							</view> -->
							<view class="img_view_831_bg">
								<image class="v_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/zxj_bg.png"
									mode="scaleToFill" />
								<view class="v_text">
									<text>
										¥{{ currentPriceNow.exclusivePriceStr }}
									</text>
								</view>
							</view>
						</view>

					</view>
					<view class="total_view www" v-else>
						<view class="zxj_view zdyh_dkh">
							<view class="current_view">
								<text class="v_text_current">
									当前电价：¥<text
										class="current_t">{{ currentPriceNow.discount ? currentPriceNow.currentPriceStr : currentPriceNow.sweepPriceStr}}</text>
								</text>
							</view>
							<!-- 划线价展示：站点优惠 || 成长会员折扣 || 大客户价 -->
							<!-- 23.11.22 付费会员不显示划线价 -->
							<view class="hxj_view"
								v-if="currentPriceNow.discount || currentPriceNow.growthleDiscount || currentPriceNow.contractDiscount">
								<text class="v_text">
									¥{{ currentPriceNow.sweepPriceStr }}
								</text>
							</view>
							<!-- 大客户价展示条件 -->
							<view class="img_view_831_bg" v-if="currentPriceNow.contractDiscount">
								<image class="v_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/dkh_bg.png"
									mode="scaleToFill" />
								<view class="v_text">
									<text>
										¥{{ currentPriceNow.contractPriceStr }}
									</text>
								</view>
							</view>
							<!-- 成长会员价展示 -->
							<view class="img_view_831_bg" v-if="currentPriceNow.growthleDiscount">
								<image class="v_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-huiyuan.png"
									mode="scaleToFill" />
								<view class="v_text">
									<text>
										¥{{ currentPriceNow.growthlePriceStr }}
									</text>
								</view>
							</view>
							<!-- 付费会员价展示 -->
							<view class="img_view_831_bg" v-if="currentPriceNow.payleDiscount">
								<image class="v_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-vip.png"
									mode="scaleToFill" />
								<view class="v_text">
									<text>
										¥{{ currentPriceNow.paylePriceStr }}
									</text>
								</view>
							</view>
						</view>

					</view>
				</view>

			</view>


			<view class="electricityPriceCon">
				<!-- <view class="price">
					<view>
						<text class="priceText">当前电价({{nowPrice.stage?nowPrice.stage:'-'}}时)：<text class="priceCurrent">{{ nowPrice.price?nowPrice.price:'--' }}元/度</text></text>
						<text style="color: #909399;text-decoration: line-through;margin-left: 10rpx;"  v-if="nowPrice.discount">￥{{ nowPrice.sweepPriceStr }}起</text>
					</view>
					
					<image class="infoImg" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/tip2.png" @tap="pricePopupVisible(true)"></image>
				</view> -->

				<view class="infoCon">
					<view class="infoLi">
						<view class="infoVal" >
							{{ !chargeInfo.chargingTime||chargeInfo.chargingTime==0?'--':chargeInfo.chargingTime }}
						</view>
						<view class="infoTitle">
							充电时长(min)
						</view>
					</view>
					<view class="infoLi">
						<view class="infoVal">
							{{ chargeInfo.powerinfo?chargeInfo.powerinfo:'--' }}
						</view>
						<view class="infoTitle">
							已充电量(度)
						</view>
					</view>
					<view class="infoLi">
						<view class="infoVal">
							{{ chargeInfo.cost?chargeInfo.cost:'--' }}
						</view>
						<view class="infoTitle">
							预估费用(元)
						</view>
					</view>
				</view>
				<view class="infoCon">
					<view class="infoLi">
						<view class="infoVal">
							{{ chargeInfo.ivoltage?chargeInfo.ivoltage:'--' }}
						</view>
						<view class="infoTitle">
							电流(A)
						</view>
					</view>
					<view class="infoLi">
						<view class="infoVal">
							{{ chargeInfo.voltage?chargeInfo.voltage:'--' }}
						</view>
						<view class="infoTitle">
							电压(V)
						</view>
					</view>
					<view class="infoLi">
						<view class="infoVal">
							{{ chargeInfo.realTimePower ? chargeInfo.realTimePower : '--' }}
						</view>
						<view class="infoTitle">
							功率(KW)
						</view>
					</view>
				</view>
			</view>

			<view class="line_view"></view>

			<view class="electricityPriceCon" v-if="chartData.tempList">
				<view class="echartTitleCon">
					<view>
						<view class="mark1"></view>
						<view class="title">电流</view>
						<view class="mark2"></view>
						<view class="title">功率</view>
					</view>

					<view>
						{{ chartData.current?chartData.current:'0' }}(A)/{{ chartData.power ? chartData.power : '0' }}(KW)
					</view>
				</view>
				<view class="columnCanvas">
					<l-echart ref="chart"></l-echart>
				</view>
			</view>
			<view class="infoContainer">




				<!-- 停车费 -->
				<view class="parkingRate" @tap="clickParkingRate">
					<!-- <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/infor.png"></image> -->
					<text class="parkingRateText">停车费说明</text>
				</view>



				<!-- 轮播 -->
				<view v-if="info.length" data-skeleton-hide="hideActiv" class="active">
					<swiper class="activ-in" :indicator-dots="indicatorDots" :autoplay="autoplay" :vertical="vertical"
						:interval="interval" :duration="duration" indicator-color="rgba(255, 255, 255, 0.4)"
						indicator-active-color="#fff">
						<!-- <view > -->
						<swiper-item v-for="(item, index) in info" :key="index" @tap="advertisingLink" :data-title="item.title"
							:data-status="item.status" :data-time="item.timeS" :data-link="item.advertisingLink"
							:data-type="item.connectionType" :data-path="item.mobilePath" :data-details="item.details"
							:data-id="item.id" :data-mid="item.marketingId" :data-atype="item.activityType">
							<image :src="item.image" class="swiperitem" />
						</swiper-item>
						<!-- </view> -->
					</swiper>
				</view>
				<!-- 地址 -->
				<!-- <view class="addressCon">
                    <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/adress.png"></image>
                    {{ chargeInfo.stationadss }}({{ chargeInfo.stationName }}/{{ pileNo }}/{{ gunNo }}号枪)
                </view> -->
			</view>

			<!-- 停止充电按钮 -->
			<view class="stopcharge">
				<button type="primary" @tap="clickStop">停止充电</button>

				<!-- 手动停止充电验证码 -->
				<view class="identCode" v-if="chargeInfo.identCode">
					<text class="identCodeTitle">手动停止充电验证码：</text><text
						class="val">{{ chargeInfo.identCode?chargeInfo.identCode:'--' }}</text>
				</view>
			</view>



		</view>
		<!-- 停车费弹出框 -->
		<view class="parkingCon" v-if="isParkingRate">
			<view class="parking">
				<view class="parkingImg">
					<text class="parkingTitle">停车费说明</text>
					<image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/delete2.png"
						@tap="clickParkingRate"></image>
				</view>
				<text class="parkingNotice">
					<!-- {{chargeInfo.stationadss}} {{chargeInfo.stationName}} -->
					{{ chargeInfo.parkingFeeDesc ? chargeInfo.parkingFeeDesc : '暂无' }}
				</text>
				<!-- <view class="DesCon">
            {{chargeInfo.parkingFeeDesc?chargeInfo.parkingFeeDesc:'暂无'}}
            <view class="parkingDesCon">
                <view>08:00-22:00</view>
                <view>16元/小时</view>
            </view>
            <view class="parkingDesCon">
                <view>22:00-次日08:00</view>
                <view>8元/小时</view>
            </view>
      </view> -->
			</view>
		</view>

		<!-- 充电详情 -->
		<view class="parkingCon" v-if="isParkingRate2">
			<view class="parking">
				<view class="parkingImg">
					<text class="parkingTitle">充电详情</text>
					<image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/delete2.png"
						@tap="clickParkingRate2()"></image>
				</view>

				<view class="DesCon">
					<view class="parkingDesCon2">
						<view class="Title">充电单号：</view>
						<view class="parkingVal">{{chargeInfo.busId}}</view>
					</view>
					<view class="parkingDesCon2">
						<view class="Title">开始时间：</view>
						<view class="parkingVal2">{{chargeInfo.timeS}}</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="返回首页" confirmText="结束充电" title="温馨提示"
				content="平台检测到当前充电车辆的充电数据长时间未更新，您可选择结束当前订单重新启动。如充电正常可忽略，充电数据稍后会同步，可留意账单记录" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<u-popup round='25' :show="showPrice" mode="bottom" position="bottom" @close="closePricePopupVisible"
			data-type="close" custom-class="price_popup">
			<view class="box-info">
				<view class="title">电价收费详情</view>
				<view class="t1"><text>收费时段</text><text>费用(元/度) = 电费 + 服务费</text></view>

				<!-- 831价格收费详情抽离组件 -->
				<priceDetailView :itemData="gunDetail.powerStageDetail"></priceDetailView>



			</view>
		</u-popup>
	</view>
</template>

<script>
	import capsule from '../../../components/nav/nav';
	import navLod from '../../../components/navLod/navLod';
	import homeNav from '../../../components/homeNav/homeNav';
	import * as echarts from 'echartsPages/static/js/echarts.js'
	import lEchart from '../../components/lime-echart/components/l-echart/l-echart'
	import {
		getPromoterDetail
	} from '../../../api/marketing/promotion';
	var https_1 = require('./../../../api/https.js');
	var util_1 = require('./../../../utils/util.js');

	//付费会员列表 
	import { noVipDetail } from '@/api/marketing/vip'

	var times = null;
	var billStatusTimes = null
	var billStatusNumber = 10
	var setTime = null
	var newapp = getApp()


	// 电价收费详情
	import priceDetailView from '@/components/priceDetailView/pileDetailView.vue'



	// 监控数据更新
	var waitingTimes = '';
	export default {
		components: {
			capsule,
			navLod,
			homeNav,
			lEchart,
			priceDetailView,
		},
		data() {
			return {
				stationId: '',
				getPromoterDetail: '',
				// 当前价格对象
				currentPriceNow: {},

				waitingTime: 300, // 心跳倒数
				minutes: '<1分',
				hourTime: '',
				isParkingRate: false,
				isParkingRate2: false,
				timer: null,
				info: ['https://oos-cn.ctyunapi.cn/front-end/static/static/advertisement.png',
					'https://oos-cn.ctyunapi.cn/front-end/static/static/banner2.png',
					'https://oos-cn.ctyunapi.cn/front-end/static/static/advertisement.png'
				],
				activ: true,
				indicatorDots: true,
				vertical: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				busId: '',
				pileNo: '',
				gunNo: '',

				chargeInfo: {
					temperature: false,
					soc: '',
					plateno: false,
					powerinfo: '',
					cost: '',
					realTimePower: '',
					chargingTime: ''
				},

				Notice: '',
				showCustom: true,
				bgColor: '#16181A',
				widnowH: uni.getSystemInfoSync().screenHeight,
				bar_Height: uni.getSystemInfoSync().statusBarHeight,
				backType: 0,
				priceList: [],
				showPrice: false,
				chartData: {},
				DetailPower: {},
				gunDetail: {},

				nowPrice: {
					price: '', // 当前价
					stage: '', //当前时段
					discount: '',
					sweepPriceStr: ''
				},
				first: true,
				billStatus: 0, // 充电状态，2：正在开启充电
				chargeNum: 0, // 轮询次数，查询充电状态
				sellerNo: newapp.globalData.sellerNo, // 商户编号
				currentTimes: util_1.formatTime(new Date()),
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			console.log("打印backType", options)
			// 拓杰要加上当前实时时间
			if(this.sellerNo == 'tj'){
				setTime =  setInterval(()=> {
					this.currentTimes = util_1.formatTime(new Date())
				}, 1000);
			}
			if (options.backType) {
				this.backType = options.backType
			}
			this.busId = options.busId,
				this.pileNo = options.pileNo,
				this.stationId = options.stationId
			this.gunNo = options.gunNo
			this.billStatus = options.billStatus

			this.getNotice();

			//  await this.getChargeState()
			this.$nextTick(() => {
				//this.reciprocal();// 监控心跳刷新时间
				this.getMove();

			})
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.first = true
			// 2024/10/28 金清 加上了billStatus=1也算是启动中
			if (this.billStatus == 1 || this.billStatus == 2) {
				// 如果订单状态为充电中，那么就要轮询检测是否成功开启充电后再调用 getChargeState
				// uni.showLoading({
				// 	title: '充电开启中...',
				// 	mask: true
				// })
				this.chkCharge(this.busId, this.pileNo, this.gunNo)
			} else {
				this.getChargeState()
			}
			// #ifdef MP-WEIXIN
			wx.onMemoryWarning(function() {
				console.log('请注意aaa：内存不足！！')
			})
			// #endif

		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {
			clearInterval(waitingTimes);
			clearInterval(times);
			clearInterval(billStatusTimes)
			if(this.sellerNo == 'tj'){
				clearInterval(setTime)	 
			}
		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			clearInterval(waitingTimes);
			clearInterval(times);
			clearInterval(billStatusTimes)
			this.abortRequestTasks()
			if(this.sellerNo == 'tj'){
				clearInterval(setTime)	 
			}
		},

		onPageScroll: function(e) {
			//  let height=this.widnowH <=568 ?(this.bar_Height + 40):(this.bar_Height + 45)
			//   if (e.scrollTop > height ){
			// 	this.setData({
			// 	  showCustom:true,
			// 	  bgColor:'#16181A'
			// 	})
			//   }else{
			// 	this.setData({
			// 	  showCustom:false,
			// 	})
			//   }
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			dialogConfirm() {
				this.$refs.alertDialog.close()
				this.stop();
			},
			dialogClose() {
				this.$refs.alertDialog.close()
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 获取实时数据倒数 前端判断距【最新充电数据获取时间】超过5分钟时，弹窗提示
			reciprocal: function() {
				var that = this;
				waitingTimes = setInterval(function() {
					console.log('倒数：', that.waitingTime)
					if (that.waitingTime <= 1) {
						console.log('弹框')
						that.$refs.alertDialog.open()
						clearInterval(waitingTimes);
						clearInterval(times);
						clearInterval(billStatusTimes)
					}
					that.waitingTime = --that.waitingTime
				}, 1000);
			},

			// 取消存储在globalData.requestTasks的网络请求
			abortRequestTasks() {
				console.log('-----取消轮询-----', newapp.globalData.requestTasks);
				newapp.globalData.requestTasks.forEach(item=> {
					item.abort()
				})
				newapp.globalData.requestTasks = []
			},

			// 检测是否准备完成充电
			chkCharge (busId, pileNo, gunNo) {
				this.chargeNum++
				var data = {
					busId: busId,
					pileNo: pileNo,
					gunNo: gunNo
				};
				https_1.queryIsChargeByBusId(data).then((res) => {
					if (res.code == 0) {
						// 开启充电成功
						uni.hideLoading()
						this.getChargeState()
					} else {
						this.pollingChkCharge() // 轮询
					}
				}).catch(err => {
					this.pollingChkCharge() // 轮询
				})
			},

			// 轮询检测是否准备充电完成
			pollingChkCharge() {
				setTimeout(() => {
					if (this.chargeNum > 60) {
						// 如果60次轮询检测充电都还是开启中，那么就调用getChargeState，让这个接口提示充电错误信息
						uni.hideLoading()
						this.getChargeState()
						return
					} else {
						this.chkCharge(this.busId, this.pileNo, this.gunNo)
					}
				}, 1500)
			},

			// 充电详情
			async getChargeState() {
				console.log("进入getChargeState")
				return new Promise((resolve, reject) => {
					var that = this
					https_1.querChargeOnline({
						busId: that.busId,
						pileNo: that.pileNo,
						gunNo: that.gunNo,
					}, true).then(function(res) {
						console.log("打印充电详情", res.code, res, that.busId, that.busId, that.pileNo, that.gunNo)
						if (res.code == 0 || res.code == 41623) {

							if (res.data.gunNo) {
								that.waitingTime = 300
								const chargingData = res.data

								that.billId = chargingData.billId

								if (chargingData.gunState == 3) {
									chargingData.voltage = (chargingData.voltage / 1000).toFixed(3) // 电压
									chargingData.power = (chargingData.power / 1000).toFixed(3) // 电量
									chargingData.cost = (chargingData.cost / 100).toFixed(4) // 费用
									//chargingData.price = (chargingData.electPrice /10000).toFixed(3) //当前电价
									chargingData.ivoltage = (chargingData.ivoltage / 1000).toFixed(3) //电流
									chargingData.powerinfo = (chargingData.powerinfo / 1000).toFixed(3) //已充电量
									chargingData.identCode = chargingData.identCode //停止充电验证码
									//chargingData.stage = chargingData.stage===1?'尖':chargingData.stage===2?'峰':chargingData.stage===3?'平':chargingData.stage===4?'谷':'-'
									that.chargeInfo = chargingData
									if (that.chargeInfo.chargingTime > 60) {
										console.log("进入minTime")
										that.minTime(that.chargeInfo.chargingTime)
									}
								} else {
									clearInterval(times)
									if (chargingData.gunState === 1 || chargingData.gunState === 4) {
										// 空闲 || 充电完成
										that.showToast(res.msg, '充电完成')
									} else if (chargingData.gunState === 5) {
										// 离线
										that.showToast(res.msg, '桩离线')
									} else if (chargingData.gunState === 7) {
										// 故障
										that.showToast(res.msg, '故障')
									} else {
										// 其他
										that.showModal(res.msg)
									}
								}
								console.log(that.first)
								// 第一次
								if (that.first) {
									console.log('进入第一次')
									that.first = false
									// that.getStationDetail()
									that.init_echarts()
									that.pricePopupVisible(false)
									times = setInterval(() => {
										console.log('进入第一次循环')
										that.getChargeState()
										that.init_echarts();
										that.pricePopupVisible(false)
									}, 10000)
								}
							}

							if (res.code == 41623) {
								console.log('进入', res)
								that.$refs.alertDialog.open()
								that.billId = res.data.billId
								clearInterval(times)
								clearInterval(billStatusTimes)
							}

							//res.code==40623||res.code==40624
						}else if (res.code == 40624 || res.code == 40623 || res.code == 40613 || res.code == 40600 || res
							.code == 3) {
							clearInterval(times)   
							clearInterval(billStatusTimes)
							that.billId = res.data ? res.data.billId : 0
							uni.showModal({
								title: '停止充电',
								content: '平台检测充电已结束，是否结束当前充电？',
								confirmText: '结束充电',
								cancelText:'取消',
								confirmColor: that.objColor2.textColor,
								success: function (res) {
									if (res.confirm) {
										that.stop()
									}else{
										times = setInterval(() => {
										console.log('继续循环等待', times)
										that.getChargeState()
										that.init_echarts();
										that.pricePopupVisible(false)
									}, 10000)
									}
								}
							});
						}else if (res.code == 41623) {
							clearInterval(times)   
							clearInterval(billStatusTimes)
							that.billId = res.data ? res.data.billId : 0
							uni.showModal({
								title: '提示',
								content: '平台检测到当前充电车辆的充电数据长时间未更新，您可选择结束当前订单重新启动。如充电正常可忽略，充电数据稍后会同步，可留意账单记录',
								confirmText: '结束充电',
								cancelText:'返回首页',
								confirmColor: that.objColor2.textColor,
								success: function (res) {
									if (res.confirm) {
										that.stop()
									}else{
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}
								}
							});
						}

						resolve('');
					})

				})
			},
			// 分钟数换算
			minTime: function(min) {
				console.log("进入minTime方法")
				var minTime = "";
				var h = Math.floor(min / 60);
				if (min > 60) {
					min -= h * 60;
					minTime = (h ? h + "小时" : '') + (min ? min + "分" : "");
					this.setData({
						hourTime: minTime
					})
				}
				// return minTime;
			},
			//获取站点详情
			getStationDetail: function() {
				var that = this;
				https_1
					.stationDetail({
						stationId: this.chargeInfo.stationId,
						latitude: uni.getStorageSync('latitude'),
						longitude: uni.getStorageSync('longitude')
					})
					.then(function(res) {
						if (res.code == 0) {
							console.log(res.data);
							that.Notice = res.data.notice
						}
					});
			},

			showModal: function(str) {
				uni.showModal({
					title: '消息提示',
					content: '' + (str || '错误'),
					confirmText: '返回首页',
					showCancel: false,
					success: function(res) {
						// 查看充电详情
						uni.switchTab({
							url: '../../../pages/index/index'
						});
					}
				});
			},

			// 获取动图svga
			async getMove() {

				// gunType = 3 表示超充
				// if (this.chargeInfo.stationId === 3) {
				// 	this.$refs.svgaRightCon.render(async (parser, player) => {
				// 		//#ifdef APP-PLUS || MP-WEIXIN
				// 		var videoItem = ''
				// 		if(newapp.globalData.sellerNo == 'hyc'){
				// 			videoItem = await parser.load(`${newapp.globalData.imgUrl}/h5/cartoon/automobileR.svga`)
				// 		}else{
				// 			videoItem = await parser.load(
				// 			"https://oos-cn.ctyunapi.cn/front-end/static/cartoon/automobileR.svga");
				// 		}
				// 		//#endif
				// 		//#ifdef H5
				// 		var videoItem = await parser.load(`${newapp.globalData.imgUrl}/h5/cartoon/automobileR.svga`)
				// 		//#endif
				// 		await player.setVideoItem(videoItem);
				// 		uni.hideLoading();
				// 		// 设置当前动画的循环次数，0代表无限循环 默认 0
				// 		player.loops = 600
				// 		// 开始播放动画，reverse = true 时则反向播放。
				// 		player.startAnimation()

				// 	})
				// 	this.$refs.svgaLeftCon.render(async (parser, player) => {
				// 		//#ifdef APP-PLUS || MP-WEIXIN
				// 		var videoItem = ''
				// 		if(newapp.globalData.sellerNo == 'hyc'){
				// 			videoItem = await parser.load(`${newapp.globalData.imgUrl}/h5/cartoon/automobileL.svga`)
				// 		}else{
				// 			videoItem = await parser.load(
				// 			"https://oos-cn.ctyunapi.cn/front-end/static/cartoon/automobileL.svga");
				// 		}
				// 		//#endif
				// 		//#ifdef H5
				// 		var videoItem = await parser.load(`${newapp.globalData.imgUrl}/h5/cartoon/automobileL.svga`)
				// 		//#endif
				// 		await player.setVideoItem(videoItem);
				// 		uni.hideLoading();
				// 		// 设置当前动画的循环次数，0代表无限循环 默认 0
				// 		player.loops = 600
				// 		// 开始播放动画，reverse = true 时则反向播放。
				// 		player.startAnimation()

				// 	})
				// }
				this.$refs.myCanvas.render(async (parser, player) => {
					//#ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY
					var videoItem = ''
					if(newapp.globalData.sellerNo == 'hyc'){
						videoItem = await parser.load(`${newapp.globalData.imgUrl}/h5/cartoon/greenBall3.svga`)
					}else{
						videoItem = await parser.load(
						"https://oos-cn.ctyunapi.cn/front-end/static/cartoon/greenBall3.svga");
					}
					//#endif
					//#ifdef H5
					var videoItem = await parser.load(`${newapp.globalData.imgUrl}/h5/cartoon/greenBall3.svga`)
					//#endif
					await player.setVideoItem(videoItem);
					// uni.hideLoading();
					// 设置当前动画的循环次数，0代表无限循环 默认 0
					player.loops = 0
					// 开始播放动画，reverse = true 时则反向播放。
					player.startAnimation()

				})
			},

			// 停止充电
			clickStop: function() {
				var that = this;
				uni.showModal({
					title: '停止充电',
					content: '确认要结束充电吗？',
					confirmText: '结束充电',
					cancelText: '取消',
					confirmColor: that.objColor2.textColor,
					success: function(res) {
						if (res.confirm) {
							// 停止充电
							clearInterval(waitingTimes);
							clearInterval(times);
							clearInterval(billStatusTimes)
							that.stop();
						}
					}
				});
			},

			stop: function() {
				var that = this;
				uni.showLoading({
					title: '停止中...',
					mask: true
				});

				this.$refs.myCanvas.render((parser, player) => {
					player.stopAnimation(true)
					player.clear()
					try {
						player.clearDynamicObjects()
					} catch (e) {}
					console.log('动画结束444')
					uni.redirectTo({
						url: '/homeSub/pages/stopCharging/stopCharging?busId=' + this.busId + '&billId=' + this.billId +
							'&stationId=' + this.stationId
					})
				})
			},

			// 获取公告
			getNotice: function() {
				var that = this;
				https_1
					.advertisingGeneralQuery({
						location: 3
					})
					.then(function(res) {
						// var info = [];
						// res.data.map(function (item) {
						//     info.push(item.image);
						// });
						that.info = res.data
					});
			},

			// 停车费
			clickParkingRate: function() {
				this.isParkingRate = !this.isParkingRate
			},
			// 充电详情
			clickParkingRate2: function() {
				console.log('3232')
				this.isParkingRate2 = !this.isParkingRate2
			},


			showToast: function(str1, str2) {
				uni.showToast({
					title: str1 || str2,
					icon: 'none',
					duration: 2000
				});
			},

			// 分转元
			regFenToYuan: function(fen) {
				var num = fen;
				num = fen * 0.01;
				num += '';
				var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;
				num = num.replace(reg, '$1'); // num = toDecimal2(num)

				return Number(num).toFixed(2);
			},

			//初始化图表
			async init_echarts() {
				console.log('进入初始化图表')
				var th = this
				let data = await https_1.doGetMonitorDetailPower({
					pileId: th.chargeInfo.pileId,
					gunNo: th.gunNo
				}).then(res => {
					//th.chartData = res.data
					console.log('进入成功', res.data)
					res.data.currentList = res.data.currentList.map(item2 => {
						item2 = (item2 / 1000).toFixed(2)
						return item2
					})
					res.data.powerList.map(item3 => {
						//item3 = (item3 / 1000).toFixed(2)
						return item3
					})
					res.data.current = res.data.currentList[res.data.currentList.length - 1]
					res.data.power = res.data.powerList[res.data.powerList.length - 1]
					return res.data
					console.log('进入成功1', res.data)
				})
				if (JSON.stringify(th.chartData) === '{}') {
					console.log('进入成功2', data)
					th.chartData = data
					console.log(data)
					let option = {
						series: [{
								smooth: true,
								symbol: 'none',
								data: th.chartData.currentList,
								type: "line",
								color:uni.getStorageSync('textColor') || th.objColor2.textColor,
							},
							{
								smooth: true,
								symbol: 'none',
								data: th.chartData.powerList,
								type: "line",
								color: '#FC724C',
							}
						],
						grid: { // 让图表占满容器
							top: "20px",
							left: "30px",
							right: "0px",
							bottom: "20px"
						},
						xAxis: {
							data: th.chartData.timeList,
							type: "category",
							axisLine: {
								lineStyle: {
									color: '#3d3f41'
								}
							},
							axisTick: {
								show: false, //刻度线
							},
							axisLabel: {
								textStyle: {
									color: '#a5a6a6',
								}
							},
						},
						yAxis: {
							type: "value",
							splitLine: {
								show: true,
								lineStyle: {
									color: '#3d3f41',
									type: 'solid'
								}
							},
							axisLabel: {
								textStyle: {
									color: '#a5a6a6',
								}
							},
						},
					}


					th.$nextTick(() => {
						setTimeout(() => {
							th.$refs.chart.init(echarts, chart => {
								chart.setOption(option);
							});
						}, 100)
					})
				} else {
					console.log('进入成功3', data)
					th.chartData = data
					let option = {
						series: [{
								smooth: true,
								symbol: 'none',
								data: th.chartData.currentList,
								type: "line",
								color: th.objColor2.textColor,
							},
							{
								smooth: true,
								symbol: 'none',
								data: th.chartData.powerList,
								type: "line",
								color: '#FC724C',
							}
						],
						grid: { // 让图表占满容器
							top: "20px",
							left: "30px",
							right: "0px",
							bottom: "20px"
						},
						xAxis: {
							data: th.chartData.timeList,
							type: "category",
							axisLine: {
								lineStyle: {
									color: '#3d3f41'
								}
							},
							axisTick: {
								show: false, //刻度线
							},
							axisLabel: {
								textStyle: {
									color: '#a5a6a6',
								}
							},
						},
						yAxis: {
							type: "value",
							splitLine: {
								show: true,
								lineStyle: {
									color: '#3d3f41',
									type: 'solid'
								}
							},
							axisLabel: {
								textStyle: {
									color: '#a5a6a6',
								}
							},
						},
					}
					this.$refs.chart.setOption(option)
				}


			},

			// 计算总价
			calculation: function(str) {
				var numArr = str.match(/\d+\.?\d*/g) || [];
				var totalPrice = 0;
				numArr.forEach(function(item) {
					totalPrice += Number(item);
				});
				return totalPrice.toFixed(4);
			},

			//价格弹窗
			pricePopupVisible: function(r) {
				console.log('进入')
				var gunid = this.gunid;
				var that = this;
				//stationId:  this.chargeInfo.stationId,
				//
				let getApiUrl = uni.getStorageSync('token') ? https_1.getStationGunDetails : https_1
					.getStationGunDetailsNotAuth
				getApiUrl(this.chargeInfo.gunId)
					.then(function(res) {
						if (res.code == 0) {
							that.gunDetail = res.data || {};

							//当前价格对象
							that.currentPriceNow = res.data.currentPriceNow


							if (res.data) {
								res.data.powerStageDetail.map(item => {
									if (item.now) {
										that.nowPrice.stage = item.stage == 1 ? '尖' : item.stage == 2 ? '峰' : item.stage == 3 ? '平' :
											item.stage == 4 ? '谷' : '--'
										that.nowPrice.price = item.currentPriceStr
										that.nowPrice.sweepPriceStr = item.sweepPriceStr
										that.nowPrice.discount = item.discount

										// if(item.discount){
										// 	that.price = item.currentPriceStr
										// }else{
										// 	that.price = item.currentPriceStr
										// }
									}
								})
							}
							if (r) {
								that.showPrice = true
							}

						}
					});
			},


			// 尖峰平谷
			jfpg: function(jfpg) {
				var text = '';
				var style = '';
				var icon = '';
				switch (jfpg) {
					case 'Jian':
						text = '尖';
						style = 'jian';
						icon = 'https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/tip.png';
						break;

					case 'Feng':
						text = '峰';
						style = 'feng';
						icon = 'https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/peak.png';
						break;

					case 'Ping':
						text = '平';
						style = 'ping';
						icon = 'https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/flat.png';
						break;

					case 'Gu':
						text = '谷';
						style = 'gu';
						icon = 'https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/valley.png';
						break;

					default:
						break;
				}

				return {
					text: text,
					style: style,
					icon: icon
				};
			},

			closePricePopupVisible() {
				this.showPrice = false
			},


			// 轮播跳转详情
			advertisingLink: function(e) {

				var types = e.currentTarget.dataset.type //1跳转 2是详情
				var link = e.currentTarget.dataset.link
				var path = e.currentTarget.dataset.path
				var details = e.currentTarget.dataset.details
				var title = e.currentTarget.dataset.title
				var timeS = e.currentTarget.dataset.time
				var status = e.currentTarget.dataset.status
				var id = e.currentTarget.dataset.id

				const activityType = e.currentTarget.dataset.atype;
				const marketingId = e.currentTarget.dataset.mid;
				console.log(activityType, 'activityTypeactivityType')
				console.log(e)
				if (types == 1) {
					util_1.LinkType(link);
				} else if (types == 2) {
					// newapp.globalData.richText = details;
					// uni.navigateTo({
					// 	url: `/homeSub/pages/advertisDetails/advertisDetails?title=` + title + '&time=' + timeS + '&status=' + status
					// });
					//为解决跳转后分享问题使用新的页面方法;
					uni.navigateTo({
						url: `../../homeSub/pages/advertisDetails/advertisDetailsNew?id=${id}`
					});
				} else if (types == 4) {
					// 处理营销获客逻辑
					this.disposeMarketingActivity(activityType, marketingId);
				} else if (types == 5) {
					uni.navigateTo({
						url: path
					});
				} else {
					return false;
				}

			},
			// 处理营销活动
			disposeMarketingActivity(activityType, marketingId) {
				console.log(activityType, marketingId);
				switch (activityType) {
					// activityType:  1 => 充值奖励活动, 2 => 累计消费活动, 3 => 单笔折扣活动, 4 => 站点优惠活动,
					// 5 => 邀请奖励, 6 => 新客有礼, 7=> 多人拼团 8=>付费会员 9=>推广员
					// marketingId: 活动id
					case 1:
						uni.navigateTo({
							url: '/marketing_page/pages/pay/payAward/payAward?HD=' + marketingId
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/homeSub/pages/discount/cumulativeMoney/cumulativeMoney?HD=' + marketingId
						});
						break;
					case 3:
						uni.navigateTo({
							url: '/homeSub/pages/discount/singleMoney/singleMoney?HD=' + marketingId
						});
						break;
					case 4:
						uni.navigateTo({
							url: '/homeSub/pages/discount/siteOffers/siteOffers?HD=' + marketingId
						});
						break;
					case 5:
						// uni.navigateTo({
						// 	url: '/marketing_page/pages/invite/invitation/invitation?HD=' + marketingId
						// });
						newapp.globalData.CHECK_LOGIN(() => {
							uni.navigateTo({
								url: '/marketing_page/pages/invite/invitation/invitation?HD=' + marketingId
							});
						})
						break;
					case 6:
						console.log('弹出新客有礼弹窗;;;;');
						uni.navigateTo({
							url: 'pages/index/index'
						});
						break;
					case 7:
						uni.navigateTo({
							url: '/marketing_page/pages/group/list/index'
						});
						break;
					case 8:
						// uni.navigateTo({
						// 	url: '/marketing_page/pages/member/index/index'
						// });
						newapp.globalData.CHECK_LOGIN(() => {
							// 会员列表
							noVipDetail().then(res => {
								console.log(res,'ffhy.List.....')
								if (res.code == 200) {
									let vipId = res.data[0].vipId
									uni.navigateTo({
										url: "/mine/pages/vip/noVip?id=" + vipId,
									})
								}
							})
						})
						break;
					case 9:
						let url = this.getPromoterDetailFun?.spreadStatus == 1 ? '/marketing_page/pages/promotion/index/index' :
							'/marketing_page/pages/promotion/recruit_plan/recruit_plan';
						uni.navigateTo({
							url
						});
						break;
				}
			},
			// 获取用户（付费会员，成长会员）信息
			getPromoterDetailFun() {
				getPromoterDetail({
					plUserId: uni.getStorageSync('memberId')
				}).then((res) => {
					console.log(res.data, '获取外包会员信息...........');
					let getPromoterDetail = res.data || {};
					this.setData({
						getPromoterDetail
					});
				});
			},
		}
	};
</script>
<style lang="less" scoped>
	@import '../../../commin/commin.less';
	/* homeSub/pages/power/power.less */


	// 831样式
	@import './power-discount.less';


	.powerCon {
		padding-bottom: 200rpx;
		padding-top: 12rpx;
		background-color: #16181A;
		height: 100%;
		font-family: PingFang SC;
		overflow: hidden;
		max-width:100vw;
	}

	.advCon {
		color: #b1bfce;
		background-color: rgba(255, 255, 255, 0.1);
		font-size: 26rpx;
		padding: 22rpx 40rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;

		.img {
			width: 35rpx;
			height: 27rpx;
			vertical-align: middle;
			margin-right: 15rpx;
		}
	}

	.vehicleInfoCon {
		margin-top: 39rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.vehCon {
		width: 192rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 42rpx;
			height: 42rpx;
			display: inline-block;
			vertical-align: text-bottom;
			margin-top: 22rpx;
		}

		.vehVal {
			color: #fff;
			font-size: 34rpx;
			margin-left: 6rpx;
			font-weight: bold;
			margin-bottom: 7rpx;
		}

		.brandVal {
			font-size: 28rpx;
			font-weight: 400;
			color: #cfe7ff;
			margin-left: 6rpx;
			margin-bottom: 10rpx;
		}

		.vehTitle {
			font-size: 24rpx;
			font-weight: 400;
			color: #b1bfce;
			margin-left: 6rpx;
		}
	}

	.infoContainer {
		padding: 0 40rpx;
	}

	.chargeInfoCon {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		color: #fff;

		.amount {
			width: 340rpx;
			height: 180rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.leftLocation {
			position: absolute;
			top: 35rpx;
			left: 142rpx;

			.amountVal {
				font-size: 36rpx;
				font-family: DIN;
				font-weight: bold;
				color: #00ffff;
			}

			.amountTitle {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #a6d2ff;
				margin-top: 10rpx;
			}
		}

		.rightLocation {
			position: absolute;
			top: 35rpx;
			left: 54rpx;

			.amountVal {
				font-size: 36rpx;
				font-family: DIN;
				font-weight: bold;
				color: #00ffff;
			}

			.amountTitle {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #a6d2ff;
				text-align: center;
				margin-top: 10rpx;
			}
		}
	}

	.svg_icon {
		display: inline-flex;
		width: 1em;
		height: 1em;
		overflow: hidden;
	}

	.svg_icon-inner {
		width: 1em;
		height: 1em;
		transform: translateY(-1em);
		filter: drop-shadow(0 1em 0 currentColor);
	}

	.active {
		// .kuangao(94%, 210rpx);
		// .margins(32rpx; auto; 32rpx; auto);

		.activ-in {
			.gao(210rpx);

			.swiperitem {
				.gao(210rpx);
				.kuan(@percent);
				.borderradius(16rpx, 16rpx, 16rpx, 16rpx);
			}
		}

	}

	.addressCon {
		color: #a6d2ff;
		font-size: 24rpx;
		padding: 66rpx 0rpx 99rpx 0rpx;
		font-weight: 500;

		.img {
			width: 28rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-right: 17rpx;
		}
	}

	.parkingCon {
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.parking {
		width: 702rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: fixed;
		bottom: 26rpx;
		left: 24rpx;
		padding: 30rpx 30rpx 48rpx 30rpx;
		box-sizing: border-box;
		z-index: 4;

		.parkingImg {
			text-align: center;

			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			.img {
				position: absolute;
				right: 23rpx;
			}
		}

		.parkingTitle {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #303133;
		}


		image {
			width: 23rpx;
			height: 23rpx;
		}
	}

	.DesCon {
		margin-top: 29rpx;
	}

	.parkingNotice {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #909399;
		line-height: 40rpx;
	}

	.parkingDesCon {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		font-weight: 500;
		color: #606266;
		line-height: 48rpx;
	}

	.parkingDesCon2 {
		line-height: 65rpx;

		.parkingTitle {
			display: inline-block;
			font-size: 28rpx;
			color: #606266;
			margin-left: 24rpx;
		}

		.Title {
			display: inline-block;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #606266;
			margin-left: 24rpx;
		}

		.parkingVal {
			display: inline-block;
			font-size: 28rpx;
			font-weight: bold;
			color: #303133;
			margin-left: 24rpx;
		}

		.parkingVal2 {
			display: inline-block;
			font-size: 28rpx;
			font-weight: 500;
			color: #303133;
			margin-left: 24rpx;
		}
	}

	.parkingRate {
		text-align: center;
		color: #a5a6a6;
		font-size: 26rpx;

		.parkingRateText {
			text-decoration: underline;
		}

		.img {
			width: 25rpx;
			height: 25rpx;
			vertical-align: middle;
			margin-right: 9rpx;
		}
	}

	.stopcharge {
		width: 100%;
		position: fixed;
		bottom: 0;
		text-align: center;
		justify-content: space-between;
		padding: 32rpx 31rpx 32rpx 31rpx;
		background-color: #16181A;
		z-index: 1;
		box-sizing: border-box;

		button {
			width: 680rpx;
			height: 88rpx;
			// background: linear-gradient(105deg, #6DB12E, #6DB12E);
			background: var(--btnColor);
			border-radius: 44px;
			line-height: 88rpx;
			font-size: 32rpx;
			border-color: var(--btnColor);
		}
	}

	.loading-warp {
		// text-align: center;
		position: relative;
		height: 375rpx;
		// image {
		//     position: absolute;
		//     width: 100%;
		//     height: 100%;
		//     margin: 0;
		//     left: 0;
		//     right: 0;
		//     bottom: 0;
		// }
	}

	.infoTopCon {
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		margin-top: 26rpx;

		.infoSite {
			font-size: 32rpx;
			font-weight: bold;
			position: relative;

			.infoImg {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 32rpx;
				z-index: 999;
			}
		}

		.infoGun {
			margin-top: 23rpx;
			font-weight: 500;
			color: #FFFFFF;
			opacity: 0.8;
			font-size: 28rpx;
		}
	}

	.infoPlate {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.infoEstimate {
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		opacity: 0.8;
		margin-top: 24rpx;

		.infoEstimateText {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.6;
			margin-right: 20rpx;
		}
	}

	.electricityPriceCon {
		margin: 32rpx 24rpx;
		position: relative;

		// background: linear-gradient(-15deg, rgba(35,36,38,0), rgba(55,59,64,0.99));
		// border: 2rpx solid #3E444A;
		// border-radius: 16rpx;
		.price {
			display: inline-block;
			padding: 25rpx 33rpx;
			text-align: center;
			font-size: 26rpx;
			font-weight: 500;
			color: #94979c;
			display: flex;
			justify-content: space-between;

			.priceText {
				vertical-align: middle;

				.priceCurrent {
					color: #fff
				}
			}

			.infoImg {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				margin-left: 7rpx;
				vertical-align: middle;
			}
		}
	}

	.infoCon {
		.infoLi {
			width: 100px;
			text-align: center;
		}

		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		margin-bottom: 40rpx;

		.infoTitle {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.6;
		}

		.infoVal {
			font-size: 48rpx;
			font-family: DINPro;
			font-weight: 500;
			color: #FFFFFF;
			margin-bottom: 5rpx;
		}
	}

	.columnCanvas {
		height: 180px;
		marign-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.division {
		border-top: 1rpx solid #3d3f41;
		margin: 48rpx 42rpx;
	}

	.echartTitleCon {
		color: #FFFFFF;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 25rpx 33rpx;

		.title {
			display: inline-block;
			opacity: 0.6;
		}

		.mark1 {
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			background: @blue;
			border-radius: 50%;
			margin: 0 15rpx;
		}

		.mark2 {
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			background: #FC724C;
			border-radius: 50%;
			margin: 0 15rpx;
		}
	}

	.identCode {
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		margin-top: 31rpx;

		.identCodeTitle {
			color: #FFFFFF;
			opacity: 0.5;
		}

		.val {
			color: #58B830;
		}
	}

	.box-info {
		width: 680rpx;
		height: 660rpx;
		padding: 0 32rpx 40rpx 32rpx;
		margin: 0 auto;
		overflow: auto;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #303133;
			position: absolute;
			padding: 40rpx 0rpx 40rpx 15rpx;
			background-color: #fff;
			width: 90%;
			z-index: 999;

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 46rpx;
				left: 0rpx;
				width: 6rpx;
				height: 30rpx;
				background-color: #6DB12E;
				z-index: 2;
			}
		}

		&>.t1 {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #303133;
			margin-bottom: 24rpx;
			margin-top: 120rpx;
		}

		.list {
			.item {
				width: 620rpx;
				padding: 35rpx 32rpx;
				position: relative;
				display: flex;
				justify-content: space-between;
				background: #F5F7FA;
				margin-bottom: 16rpx;
				align-items: center;

				&:last-of-type {
					margin-bottom: 0;
				}

				.time {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #303133;
				}

				&>.t1 {
					width: 80rpx;
					height: 38rpx;
					display: none;
					background: #FC724C;
					border-radius: 17rpx 17rpx 0px 17rpx;
					color: #F5F7FA;
					text-align: center;
					line-height: 38rpx;
					font-size: 20rpx;
					position: absolute;
					top: 40rpx;
					left: 220rpx;
					z-index: 1;
				}

				&>.t2 {
					width: 110rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					display: none;
					background: #FC724C;
					border-radius: 0px 20rpx 20rpx 0px;
					color: #fff;
					font-size: 26rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.t2.active,
				.t1.active {
					display: block;
				}

				.right-item {

					.type1,
					.type2 {
						font-size: 26rpx;
						font-weight: 500;
						color: #606266;

						.l1 {
							display: flex;
							justify-content: space-between;
							align-items: center;

							text {
								margin-left: 20rpx;
							}
						}

						.t2 {
							font-size: 32rpx;
							font-weight: bold;
							color: @blue;
						}

						.delete {
							font-size: 26rpx;
							font-weight: 400;
							text-decoration: line-through;
							color: #909399;
							display: flex;
							justify-content: space-between;
							margin-top: 30rpx;

							text {
								margin-left: 20rpx;
							}
						}

						&>text {
							margin-left: 20rpx;
						}
					}

					.type2 {
						.t1 {
							font-size: 32rpx;
							font-weight: bold;
							color: @blue;
						}
					}
				}

			}

			.item.active {
				background: rgba(252, 114, 76, 0.08);
			}
		}
	}

	.svgaRightCon {
		position: absolute;
		width: 110rpx;
		height: 100%;
		right: 0rpx;
		top: 0rpx;
	}

	.svgaLeftCon {
		position: absolute;
		width: 110rpx;
		height: 100%;
		left: 0rpx;
		top: 0rpx;
	}

	.sosCon {
		font-size: 72rpx;
		font-weight: bold;
		color: #00FFAE;
		text-align: center;
		position: absolute;
		width: 100%;
		text-align: center;
		top: 148rpx;
		z-index: 9999;

		// z-index: 99;
		.sosScale {
			font-size: 30rpx;
		}
	}

	.SVGACon {

		// position: relative;
		// height: 100%;
		// width: 100%;
		canvas {
			z-index: 1;
		}

	}

	.price_popup {
		width: 702rpx !important;
		height: 691rpx;
		margin: 0 24rpx 26rpx 24rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		border-radius: 16rpx;
	}



	/*站点优惠价格样式*/
	.yhimg_box {
		width: 40rpx;
		height: 40rpx;
		// margin-right: 8rpx;
		position: relative;

		.discount_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
		}

		.vip_text {
			position: absolute;
			top: 40%;
			left: 55%;
			transform: translate(-50%, -50%);
			font-size: 16rpx;
			font-family: DIN-BlackItalic;
			font-weight: 600;
			// font-style:italic;
			color: #A65424;
		}
	}
</style>